<template>
  <div class="all">
    <div class="firstTop">
      <div class="f_t">
        <div class="f_t_left">
          <span>欢迎,</span>
          <a href="#">{{name}}</a>
          <span class="f_t_left_tc" @click="tc">退出</span>
        </div>
        <div class="f_t_right">
          <span><router-link to="MyXinXi" style="text-decoration: none;color:#6C6E72">我的订单</router-link></span>
          <span><router-link to="MyXinXi" style="text-decoration: none;color:#6C6E72">我的同程</router-link></span>
          <span>客户服务</span>
          <span>合作中心</span>
          <span class="f_t_right_phone">
            <img src="../../../assets/zgr/手机.png" alt="" width="18px" height="19px">
          </span>
          <span class="f_t_right_wechat">
            <img src="../../../assets/zgr/微信%20(1).png" alt="" width="20px" height="18px">
          </span>
        </div>
      </div>
    </div>
    <div class="secondTop">
      <div class="s_t_left">
        <img src="../../../assets/zgr/logo.png" alt="" width="183px" height="90px">
      </div>
      <span class="yantai">烟台</span>
      <div class="s_t_middle">

      </div>
      <div class="s_t_right">
        <img src="../../../assets/zgr/telphonel.png" alt="" width="34px" height="34px">
        <div class="s_t_right_phone">
          <p>7X24h热门电话</p>
          <p>推荐拨打免费网络电话</p>
        </div>
      </div>
    </div>
    <div class="lastTop">
      <div class="l_t_all">
        <div class="l_t">
          <div class="sy"></div>
          <div class="jd"></div>
          <div class="jp"></div>
          <div class="hcp"></div>
          <div class="qc"></div>
          <div class="jd"></div>
          <div class="gl"></div>
<!--          下拉菜单-->
          <div class="flex flex-wrap items-center gap-4">
          <el-dropdown placement="bottom-start" popper-class='a11'>
            <el-button class="xiala"><router-link to="ShouYe" style="text-decoration: none;color: white">首页</router-link> </el-button>
            <template #dropdown class="a1">
              <el-dropdown-menu class="myxiala" >
                <el-dropdown-item>签证</el-dropdown-item>
                <el-dropdown-item>国际港澳机票</el-dropdown-item>
                <el-dropdown-item>国际·港澳台酒店</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-dropdown placement="bottom">
            <el-button class="xiala"> 酒店 </el-button>
            <template #dropdown>
              <el-dropdown-menu class="myxiala">
                <el-dropdown-item><router-link to="JiuDian" style="text-decoration: none;color: #6C6E72">国内酒店</router-link></el-dropdown-item>
                <el-dropdown-item>国外酒店</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-dropdown placement="bottom-end">
            <el-button class="xiala"> 机票 </el-button>
            <template #dropdown>
              <el-dropdown-menu class="myxiala">
                <el-dropdown-item><router-link to="planeHome" style="text-decoration: none;color: #6C6E72">国内机票</router-link></el-dropdown-item>
                <el-dropdown-item>国际·港澳台机票</el-dropdown-item>
                <el-dropdown-item>同程商旅</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-dropdown placement="bottom-end">
            <el-button class="xiala"> 火车票 </el-button>
            <template #dropdown>
              <el-dropdown-menu class="myxiala">
                <el-dropdown-item>签证</el-dropdown-item>
                <el-dropdown-item>国际·港澳机票</el-dropdown-item>
                <el-dropdown-item>国际·港澳酒店</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-dropdown placement="bottom-end">
            <el-button class="xiala"> 汽车·船票 </el-button>
            <template #dropdown>
              <el-dropdown-menu class="myxiala">
                <el-dropdown-item><router-link to="busHome" style="text-decoration: none;color: #6C6E72">汽车票首页</router-link></el-dropdown-item>
                <el-dropdown-item><router-link to="boatHome" style="text-decoration: none;color: #6C6E72">船票</router-link></el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
            <el-dropdown placement="bottom-end">
              <el-button class="xiala"><router-link to="home" style="text-decoration: none;color: white">景点</router-link></el-button>
              <template #dropdown>
                <el-dropdown-menu class="myxiala">
                  <el-dropdown-item>国内景点</el-dropdown-item>
                  <el-dropdown-item>周边跟团游</el-dropdown-item>
                  <el-dropdown-item>主题景点</el-dropdown-item>
                  <el-dropdown-item>定制旅行</el-dropdown-item>
                  <el-dropdown-item>迪士尼</el-dropdown-item>
                  <el-dropdown-item>全领域旅行</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown placement="bottom-end">
              <el-button class="xiala"> 周边跟团 </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown placement="bottom-end">
              <el-button class="xiala">境内游 </el-button>
              <template #dropdown>
                <el-dropdown-menu class="myxiala">
                  <el-dropdown-item><router-link to="JingNeiYou" style="text-decoration: none;color: #6C6E72">境内游首页</router-link></el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown placement="bottom-end">
              <el-button class="xiala"> 出境游 </el-button>
              <template #dropdown>
                <el-dropdown-menu class="myxiala">
                  <el-dropdown-item>出境游首页</el-dropdown-item>
                  <el-dropdown-item>签证</el-dropdown-item>
                  <el-dropdown-item>出境定制</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown placement="bottom-end">
              <el-button class="xiala"> 邮轮 </el-button>
              <template #dropdown>
                <el-dropdown-menu class="myxiala">
                  <el-dropdown-item>邮轮首页</el-dropdown-item>
                  <el-dropdown-item>团队定制</el-dropdown-item>
                  <el-dropdown-item>国内航线</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown placement="bottom-end">
              <el-button class="xiala"> 签证 </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown placement="bottom-end">
              <el-button class="xiala"> 攻略 </el-button>

              <template #dropdown>
                <el-dropdown-menu class="myxiala">
                  <el-dropdown-item>验客</el-dropdown-item>
                  <el-dropdown-item>个人首页</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown placement="bottom-end">
              <el-button class="xiala"> 企业商旅 </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown placement="bottom-end">
              <el-button class="xiala"> 亮丽内蒙 </el-button>
              <template #dropdown>
                <el-dropdown-menu class="myxiala">
                  <el-dropdown-item>靓丽内蒙古</el-dropdown-item>
                  <el-dropdown-item>百年星耀梦</el-dropdown-item>
                  <el-dropdown-item>黄河几字湾</el-dropdown-item>
                  <el-dropdown-item>自在内蒙古</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>


            <el-dropdown placement="bottom-end">
              <el-button class="xiala"> 更多 </el-button>
              <template #dropdown>
                <el-dropdown-menu class="myxiala">
                  <el-dropdown-item class="mylist">礼品卡</el-dropdown-item>
                  <el-dropdown-item class="mylist">保险</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useCounterStore}  from "@/stores/counter.js";//引入pinia
import router from "@/router/index.js";
import {ElMessageBox} from "element-plus";
const store = useCounterStore();//调用pinia
const name=ref('')
name.value=store.userForm.phone

const tc=()=> {
  ElMessageBox.confirm(
      '是否退出登录',
      '消息提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {//退出登录
        store.setUserForm('');
        store.setToken('')
        ElMessage({
          type: 'success',
          message: '退出登录成功',
        })
        router.push("/")

      })
      .catch(() => {//取消
        ElMessage({
          type: 'info',
          message: '已取消退出登录',
        })
      })
}
</script>
<style scoped>
  *{
    margin: 0 ;
    padding: 0 ;

  }
  .f_t_left_tc{
    cursor: pointer;
  }
  .all {
    height: 202px;
    background-color: white;
  }
  .firstTop {
    width: 100%;
    height: 30px;
    background-color: #f7f7f7;
  }
  .f_t {
    width: 1200px;
    height: 28px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .f_t_left {
    width: 300px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    color: #666666;
  }
  .f_t_left span {
    font:normal normal normal 12px / 20px 'Microsoft YaHei', Arial, sans-serif;
  }
  .f_t_left a {
    color: #666666;
    text-decoration: none;
    margin-right: 20px;
    transition: color 0.3s;

  }
  .f_t_left a:hover {
    color: #333333;
    text-decoration: underline;
    transition: color 0.3s;

  }
  .f_t_right {
    width: 500px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    color: #666666;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .f_t_right span {
    margin-right: 20px;
    font:normal normal normal 12px / 20px'Microsoft YaHei', Arial, sans-serif;
  }
  .f_t_right_phone {
    margin-right: 20px;
    /*垂直居中*/
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .f_t_right_wechat {
    margin-right: 20px;

    /*垂直居中*/
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .f_t_right span:hover {
    color: #333333;
    text-decoration: underline;
    transition: color 0.3s;
  }
  .secondTop {
    width: 1190px;
    height: 90px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
  }
  .yantai{
    font: normal normal normal  20px 'Microsoft YaHei', Arial, sans-serif;
  }
  .s_t_left {
    width: 200px;
    height: 100px;


  }
  .s_t_middle {
    width: 600px;
    height: 100px;
    background-color: #ffffff;

  }
  .s_t_middle_input{
    width: 460px;
    height: 40px;
    margin-left: 20px;
    border: 2px solid #00BF69;
    outline: none;
    margin-top: 30px;
  }
  .s_t_middle_button{
    width: 100px;
    height: 40px;
    background-color: #00BF69;
    border-radius:0 ;
    margin-top: 30px;

  }
  .s_t_right {
    width: 200px;
    height: 88px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    margin-top: 10px;
    transition: color 0.3s;
    cursor: pointer;

  }
  .s_t_right>div>p{
    margin: 0;
    font-size: 12px;
    color: #666666;
  }
  .lastTop {
    justify-content: center;
    font-size: 14px;
    height: 82px; /* 设置高度，可按需调整 */
    display: flex; /* 使用flex布局 */
    width: 100%;

  }
  .l_t_all{
    margin: 0 auto; /* 使元素水平居中 */
    background-color: #00BF68; /* 绿色背景 */
    justify-content: center;
    font-size: 14px;
    height: 46px; /* 设置高度，可按需调整 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    width: 100%;
  }
  .l_t {
    width: 1190px;
    height: 40px;
    display: flex; /* 使用flex布局 */
    align-items: center;
    /*background-color: #00BF68; !* 绿色背景 *!*/
  }
  /*.l_t ul{*/
  /*  list-style: none;*/
  /*  display: flex;*/
  /*  justify-content: space-between;*/
  /*  align-items: center;*/
  /*}*/
  /*.l_t ul li a{*/
  /*  color: white; !* 文字颜色为白色 *!*/
  /*  text-decoration: none; !* 去除下划线 *!*/
  /*  margin-right: 20px; !* 选项之间的间距 *!*/
  /*  padding: 5px 10px; !* 内边距，可调整选项的点击区域 *!*/
  /*  font-size: 18px;*/

  /*}*/
  /*.l_t ul li a:hover {*/
  /*  font-size: 18px;*/
  /*  background-color: rgba(255, 255, 255, 0.2); !* 鼠标悬停时背景色变为浅色 *!*/
  /*  transition: background-color 0.3s; !* 添加过渡效果 *!*/
  /*}*/
  .flex{
    width: 1190px;
    height:46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .xiala {
    height: 46px;
    border-radius: 0;
    background-color: #00BF6A;
    color: white;
    border: none !important;
    padding:5px 10px;
  }
  /* 去除按钮悬停时的边框 */
  .xiala:hover,
  .xiala:focus {
    background-color: #42D092;
    border: none;
    box-shadow: none;
  }
  /* 去除按钮聚焦时的边框（可选，若需要也去除聚焦边框） */
  .xiala:focus {
    border-color: transparent;
    outline: none;
  }

  /* 下拉菜单项样式 */
  .myxiala {
    /* 使用 flexbox 布局 */
    display: flex;
    /* 横向排列 */
    flex-direction: row;
    /* 去除默认的内边距 */
    padding: 0;
  }

</style>